<template>
	<view class="content">
		<z-paging 
			v-if="firstLoaded || isCurrentPage" 
			ref="paging" 
			v-model="dataList" 
			@query="queryList" 
			:fixed="false" 
			:showScrollbar="false"
			:default-page-size="4"
		>
			<!-- 玩家说关注的人 和 品牌说下面的品牌 -->
      <view class="attention-list" v-if="(props.tabIndex === 1 || props.tabIndex === 3 || props.tabIndex === 4)">
        <scroll-view scroll-x="true" type="list" :show-scrollbar="false" class="scroll-box">
          <view class="scroll">
            <view class="scroll-item" v-for="item in topList.attentionList" :key="item.id" @click="toBrandFest(item.id)">
              <view>
                <image :src="props.tabIndex === 1 ? item.avatarUrl : item.coverPic"/>
								<!-- 是否发布了新的帖子没看 -->
                <!-- <view v-if="item.shopName"></view> -->
              </view>
              <text>{{props.tabIndex === 1 ? item.nickName : item.shopName}}</text>
            </view>
            <!-- 占位符 不然会被全部分类挡住 -->
            <view v-if="(props.tabIndex === 3 || props.tabIndex === 4)" class="occupied"></view>
          </view>
        </scroll-view>
        <view class="all-classify" v-if="(props.tabIndex === 3 || props.tabIndex === 4)" @click="toAllBrands(props.tabIndex)">
          <image src="../../static/all.svg"/>
          <text v-if="props.tabIndex === 3">全部品牌</text>
          <text v-if="props.tabIndex === 4">全部关注</text>
        </view>
      </view>

      <rowCon v-if="isRowLayout" :dataList="dataList" @refresh="refresh" :isOnePage="isOnePage"></rowCon>
			<abreastCon v-else :dataList="dataList" @refresh="refresh"></abreastCon>
			<!-- <text v-if="isRowLayout">11111111111</text>
			<text v-else>2222222222</text> -->
		</z-paging>
	</view>
</template>

<script setup>
	import { ref, watch,reactive,onMounted,computed } from 'vue';  
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import request from '/http/request.js';

	import { articleList } from '@/api/posting.js'
	import { queryCareShopList,queryCareBrandList,collectionUserList } from '@/api/user.js'
	import {useSwiperItem} from '@/composables/swiperItem.js'

	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		layout:{
			type:Object
		}
	});
	const {paging,dataList,firstLoaded,isCurrentPage} = useSwiperItem(props)

	const isOnePage = ref(true)
	
  const topList = reactive({
		attentionList:[]
	})
	
	onMounted(() => {
		getAttentionList()
	})

	//获取关注的人/品牌/最新的品牌
	const getAttentionList = async () => {
		let res = {list:topList.attentionList}
		const params = {
			page:1,
			pageSize:10
		}
		if(props.tabIndex === 1){
			res = await collectionUserList(params)
		}else if(props.tabIndex === 3){
			res = await queryCareBrandList(params)
		}else if(props.tabIndex === 4){
			res = await queryCareBrandList(params)
		}
		topList.attentionList = res.list
	}

	//@query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
	const queryList = (pageNo, pageSize) => {
		if(pageNo == 1){
			isOnePage.value = true
		}else{
			isOnePage.value = false
		}
		let publishType = 1
		let inType = props.tabIndex
		if(props.tabIndex === 3 || props.tabIndex === 4){
			publishType = 2
			if(props.tabIndex === 3){
				inType = 0
			}else{
				inType = 1
			}
		}
		
		const data = {
			page: pageNo,
			pageSize: pageSize,
			publishType, //1=玩家说，2=品牌说
			inType, //0=发现、最新，1=关注，2=热门
		};

		articleList(data).then(res => {
			const newList = res.list
			paging.value.complete(newList);
			firstLoaded.value = true;
		}).catch(res => {
			paging.value.complete(false);
		});

	};

	const toAllBrands = (tabIndex) => {
		if(tabIndex === 3){
			uni.navigateTo({ url: '/pages/allBrands/index?type=1' });
		}else{
			uni.navigateTo({ url: '/pages/allAttention/index' })
		}
	}

	//更新列表
	const refresh = async (fn) => {
		let res =	await paging.value.refresh()
		fn()
	}
	//跳转品牌馆
	const toBrandFest = (id) => {
		if (props.tabIndex === 1) return;
		uni.navigateTo({ url: `/pages/brandFest/index?id=${id}` });
	}

	//是否展示瀑布流排列
	const isRowLayout = computed(() => {
		// console.log('props layout',props.layout)
		if(props.tabIndex === 0 && !props.layout.discover){
			// console.log('发现 横向瀑布流','dataList',dataList._rawValue);
			return true
		}else if(props.tabIndex === 2 && !props.layout.hot){
			// console.log('热门 横向瀑布流','dataList',dataList._rawValue);
			return true
		}
		// console.log('纵向布局');
		return false
	})
</script>

<style lang="scss" scoped>

	.content {
		height: 100%;
	}

  .attention-list{
		width: 750rpx;
		height: 174rpx;
		padding: 20rpx 36rpx 30rpx 36rpx;
		background: #FFFFFF;
		box-sizing: border-box;

		/* .scroll-box::-webkit-scrollbar{
			width: 100rpx !important;
			height: 20rpx !important;
			border: 1rpx solid red;
		} */
		.scroll{
			@include flex(row,flex-start);
		}
		.scroll-item{
			width: 100rpx;
			height: 124rpx;
			margin-right: 40rpx;
			@include flex(column,space-between);
			>view{
				position: relative;
				>image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
				}
				>view{
					width: 12rpx;
					height: 12rpx;
					background: #FB2C52;
					border-radius: 6rpx;
					position: absolute;
					top: 0;
					right: -6rpx;
				}
			}
			>text{
				width: 100rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				@extend %text-overflow;
			}
		}
		.occupied{
			flex-shrink: 0;
			width: 100rpx;
			height: 124rpx;
		}
		.all-classify{
			width: 120rpx;
			height: 124rpx;
			background: rgba(255,255,255,0.65);
			backdrop-filter: blur(2rpx);
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			@include flex(column,space-between);
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}
			text{
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
			}
		}
	}
</style>